<template>
  <div id="index-floor">
    <div class="app-container content-text" v-for="(indexFloor, index) in floor" :key="index" :class="{'jump-content': indexFloor.isViewName == '1'}">
      <!-- 优质商家 -->
      <high-quality-business :floor="indexFloor" v-if="indexFloor.wide_template == 'susiness'"></high-quality-business>
      <!-- 猜你喜欢 -->
      <guess-you-like :floor="indexFloor" v-if="indexFloor.wide_template == 'you_like'"></guess-you-like>
      <!-- 图片广告（长条广告） -->
      <img-adv :floor="indexFloor" @on-floor-channel="onGetFloorChannel" v-if="indexFloor.wide_template == 'advinfo'"></img-adv>
      <!-- 热门分类 -->
      <hot-classification :indexFloor="indexFloor" @on-floor-channel="onGetFloorChannel" v-if="indexFloor.wide_template == 'hotclass'"></hot-classification>
      <!-- 三个广告位 -->
      <advertising-bits :indexFloor="indexFloor" @on-floor-channel="onGetFloorChannel" v-if="indexFloor.wide_template == 'adv_more'"></advertising-bits>
      <!-- 设计师专区 -->
      <designer-place :indexFloor="indexFloor" @on-floor-channel="onGetFloorChannel" v-if="indexFloor.wide_template == 'designer'"></designer-place>
      <!-- 新款女装 -->
      <new-product :indexFloor='indexFloor' @on-floor-channel="onGetFloorChannel" v-if="indexFloor.wide_template == 'new_product'"></new-product>
      <!-- 热卖女装 -->
      <hot-product :indexFloor='indexFloor' @on-floor-channel="onGetFloorChannel" v-if="indexFloor.wide_template == 'hot_sale'"></hot-product>
      <!-- 专场女装 -->
      <special-product :indexFloor='indexFloor' @on-floor-channel="onGetFloorChannel" v-if="indexFloor.wide_template == 'special'"></special-product>
    </div>
  </div>
</template>

<script>
  import newProduct from '../IndexFloor/components/NewProduct'
  import highQualityBusiness from './components/HighQualityBusiness'
  import guessYouLike from './components/GuessYouLike'
  import imgAdv from './components/ImgAdv'
  import hotClassification from '../IndexFloor/components/HotClassification'
  import advertisingBits from '../IndexFloor/components/AdvertisingBits'
  import designerPlace from '../IndexFloor/components/DesignerPlace'
  import hotProduct from '../IndexFloor/components/HotProduct'
  import specialProduct from '../IndexFloor/components/SpecialProduct'
  import { mapGetters } from 'vuex'

  export default {
    props: {
      floor: {
        type: Array,
        default() {
          return []
        }
      },
      sexList: [Array]
    },
    components: {
      advertisingBits,
      designerPlace,
      hotProduct,
      newProduct,
      specialProduct,
      highQualityBusiness,
      hotClassification,
      guessYouLike,
      imgAdv
    },
    computed: {
      ...mapGetters(['industry', 'token', 'aJumpPosition'])
    },
    filters: {
      toUpperCase(val) {
        return val.toUpperCase()
      }
    },
    methods: {
      onGetFloorChannel(id) {
        this.$emit('on-channel', id)
      }
    }
  }
</script>

<style lang="scss">
#index-floor{
  .app-container{
    margin: 30px auto;
  }
} 
.new-product-left{
  .banner-wrap{
    background-color: #FFFFFF;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    &:hover {
      opacity: 0.8;
    }
    .dots{
      span{
        background-color: #c7c7c7;
        width: 7px;
        height: 7px;
        border: none;
        &.actived{
          background-color: #575754;
        }
      }
    }
    ul{
      li{
        background:#fff;
        a{
          background-repeat: no-repeat;
          background-size: 160px 320px;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
  .content-text {
    margin: 30px auto;
  }
</style>
